<template>
    <div class="dashboard">
      <h2>仪表盘</h2>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-item">
              <div class="stat-value">1,234</div>
              <div class="stat-label">总用户数</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-item">
              <div class="stat-value">567</div>
              <div class="stat-label">今日访问</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-item">
              <div class="stat-value">89</div>
              <div class="stat-label">文章数量</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-item">
              <div class="stat-value">12</div>
              <div class="stat-label">系统消息</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>最近活动</span>
            </template>
            <div class="activity-list">
              <div class="activity-item" v-for="i in 5" :key="i">
                <div class="activity-content">
                  <div class="activity-title">用户张三登录了系统</div>
                  <div class="activity-time">2分钟前</div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>快捷操作</span>
            </template>
            <div class="quick-actions">
              <el-button type="primary" @click="$router.push('/user/list')">用户管理</el-button>
              <el-button type="success" @click="$router.push('/content/articles')">文章管理</el-button>
              <el-button type="warning" @click="$router.push('/settings')">系统设置</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup>
  // 仪表盘逻辑
  </script>
  
  <style scoped lang="less">
  .dashboard {
    h2 {
      margin-bottom: 20px;
      color: #303133;
    }
    
    .stat-card {
      .stat-item {
        text-align: center;
        
        .stat-value {
          font-size: 32px;
          font-weight: bold;
          color: #409eff;
          margin-bottom: 8px;
        }
        
        .stat-label {
          font-size: 14px;
          color: #909399;
        }
      }
    }
    
    .activity-list {
      .activity-item {
        padding: 10px 0;
        border-bottom: 1px solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .activity-content {
          .activity-title {
            font-size: 14px;
            color: #303133;
            margin-bottom: 4px;
          }
          
          .activity-time {
            font-size: 12px;
            color: #909399;
          }
        }
      }
    }
    
    .quick-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
  }
  </style>